<template>
  <router-view/>
  <div v-show="$store.state.musicKey">
    <div id="music" @click="musicChange">
      <div class="change">点击此处切换歌曲</div>
      <div>
        <iframe id="musicModal" frameborder="no" border="0" marginwidth="0" marginheight="0" width=200 height=86 :src="src"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
// import BlogHeader from "@/components/BlogHeader";

export default {
  name: 'App',
  data(){
    return{
      musicId:[],
      srcB:"https://music.163.com/outchain/player?type=2&id=",
      srcA:"&auto=1&height=66",
      src:''
    }
  },
  mounted() {
    let localGetObject = this.localGetObject(this.userObjectName);
    if(!localGetObject) this.$store.commit('initMusic');
    else this.$store.commit('musicId',localGetObject.music);
    setTimeout(()=>{
      this.musicId=this.$store.state.musicId;
      this.musicChange();
    },1000);
  },
  methods:{
    musicChange(){
      this.musicId=this.$store.state.musicId;
      this.src=this.srcB+this.musicId[Math.floor(Math.random()*this.musicId.length)]+this.srcA
    },
    // positionChange(){
    //   let music = this.$refs.music;
    //   const length="-300px";
    //   if(music.style.left!==length)music.style.left=length;
    //   else music.style.left="0";
    // }
  }
}
</script>

<style lang="less">
  *{
    margin: 0;
    padding: 0;
    font-weight: lighter;
  }
  #music{
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .btn{
    margin: 0 10px;
    cursor: pointer;
    color: #797d7d;
    &:hover{
      color: cadetblue;
    }
  }
  .mainContain{
    padding-bottom: 10px;
  }

  .change{
    text-align: center;
    user-select: none;
    cursor: pointer;
    color: #787574;
    font-weight: bold;
    &:hover{
      color: #adaaa8;
    }
  }

  //滚动条美化
  ::-webkit-scrollbar-track {
    //background: rgba(0, 0, 0, 0.1);
    border-radius: 0;
  }
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.15);//颜色
    transition: color 0.2s ease;
  }

</style>
